<template>
  <el-button @click="$router.push('/user/index')">返回</el-button>
  <el-form
      ref="ruleForm"
      :model="editForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="editForm.username" disabled></el-input>
    </el-form-item>
    <el-form-item label="氏族" prop="team">
      <el-select v-model="editForm.team" placeholder="氏族">
        <el-option label="一团" value="一团"></el-option>
        <el-option label="二团" value="二团"></el-option>
        <el-option label="三团" value="三团"></el-option>
        <el-option label="四团" value="四团"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="游戏ID" prop="nickname">
      <el-input  v-model="editForm.nickname"></el-input>
    </el-form-item>
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="editForm.qq" disabled>不可更改</el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
      >提交修改</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {getItem} from "../../utils/storage";
import {success, warning, error} from "../../utils/message";
import {editProfile} from "@/api/user";
export default {
  name: "editProfile",
  data(){
    return {
      info:null,
      editForm:{
        username: '',
        team: '',
        nickname: '',
      },
      rules:{
        team:[{
          required:true,
          message:"请选择所在氏族",
          trigger:'change'
        }],
        nickname: [{
          required:true,
          message:"请输入游戏ID",
          trigger:'blur'
        },{
          min:3,
          max:25,
          message: "请输入3~25个字符",
          trigger: 'blur'
        }],
        qq:[{
          required:true,
          message:"请输入您的QQ",
          trigger:'blur'
        },{
          min:5,
          max:15,
          message: "请输入正确的QQ号码",
          trigger: 'blur'
        }],
      }
    }
  },
  methods:{
    submitForm(formName){
      this.$refs[formName].validate((valid)=>{
        if (valid) {
          this.editProfile()
        } else {
          warning('请检查表单项！')
          return false
        }
      })
    },
    async editProfile(){
      let resp = await editProfile(this.editForm);
      if (resp.code === 200){
        success(resp.message)
        await this.$store.dispatch('users/getUserinfo')
        this.$router.push('/user/index')
      }else {
        error(resp.message)
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      let info = this.info
      this.editForm = {
        username: info.username,
        team: info.team,
        qq:info.qq,
        nickname: info.nickname
      }
    },
  },
  mounted() {
    let temp = getItem('MeClan-TOKEN')
    this.info = temp.user
    console.log(temp.user,this.info)
    this.resetForm('ruleForm')
  }
}
</script>

<style scoped>

</style>